<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery核心js文件 -->
    <script src="javascript/jQuery-1.12.4.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>

    <link href="css/common.css" rel="stylesheet"/>
    <link href="css/login-new.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

    <!-- 引入验证插件css -->
    <link rel="stylesheet" href="./validator/css/bootstrapValidator.css"/>
    <!-- 引入验证插件js -->
    <script src="./validator/js/bootstrapValidator.js"></script>

    <title>蜗牛书城-欢迎登陆</title>
</head>
<style>
    .form-control {
        border-radius: 0;
    }
</style>

<body>
<!-- header -->
<div class="w">
    <div class="header">
        <div class="logo">
            <img src="img/title-logo.png">
            <span>欢迎登录</span>
        </div>
    </div>
</div>


<!-- content -->
<div class="warning-wrap">
    <div class="warning">
        <p><i class="iconfont">&#xe6cd;</i>
            依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
            <a href="#">《蜗牛隐私政策》</a>已上线，将更有利于保护您的个人隐私。
        </p>
    </div>
</div>

<div class="login-wrap">
    <div class="w">
        <div class="content">

            <div class="login-form fr">

                <div class="login-box h50">
                    <div class="login-way login fl active" onclick="changeForm(1)">账户登录</div>
                    <div class="login-way regist fr" onclick="changeForm(2)">注册账号</div>
                </div>

                <!-- ===================== 登录的表单 ========================-->
                <form id="login" class="show-form form-horizontal" action="/doLogin">
                    <div class="pl20 pr20">

                        <div class="h50"></div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe604;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="username" placeholder="用户账号:"
                                       autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe625;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="password" placeholder="用户密码:"
                                       autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-6 col-xs-offset-1">
                                <img id="code" style="width: 100%" onclick="flushCode()"/>
                                <input id="codeId" type="text" name="codeId" hidden />
                            </div>

                            <div class="col-xs-4">
                                <input id="userCode" type="text" name="code" class="form-control" style="margin-top: 15px"/>
                            </div>
                        </div>

                        <div class="wp">
                            <div class="h50 right-link">
                                <div class="fr fs10 pt15 "><a href="#">忘记密码</a></div>
                            </div>
                        </div>

                        <div class="wp mt100">
                            <div class="h50 center">
                                <div class="login-btn">
                                    <button type="submit">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- =========================== 注册的表单 ======================== -->
                <form id="regist" class="form form-horizontal" action='login'>
                    <div class="pl20 pr20">
                        <div class="h34"></div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe604;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="username"
                                       placeholder="新账号:" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe625;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="password"
                                       placeholder="新密码:" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe625;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="d_password"
                                       placeholder="重输密码:" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="wp mt100">
                            <div class="h50 center">
                                <div class="login-btn">
                                    <button type="submit">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>


            </div>
        </div>
    </div>
</div>

<!-- footer -->

<div class="footer ">
    <div class="pt15 fs10 center">
        <a href="#">关于我们</a> <span>|</span>
        <a href="#">联系我们</a> <span>|</span>
        <a href="#">人才招聘</a> <span>|</span>
        <a href="#">商家入驻</a> <span>|</span>
        <a href="#">广告服务</a> <span>|</span>
        <a href="#">手机蜗牛</a> <span>|</span>
        <a href="#">友情链接</a> <span>|</span>
        <a href="#">销售联盟</a> <span>|</span>
        <a href="#">蜗牛社区</a> <span>|</span>
        <a href="#">English Site</a>
    </div>
    <div class="pt10 fs10 center">
        <span>Copyright © 2004-2021</span>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>模拟京东商城登录界面</span>
    </div>

</div>
</body>
<script>
    $(function () {
        // 一开始，就得到验证码。
        flushCode();
    })

    // 刷新得到验证码
    function flushCode() {
        $.ajax({
            url: "/getCode",
            type: "get",
            success: function (json) {
                console.log("---------- 得到后端的验证码对象 ------------")
                console.log(json);
                console.log("base64位图片：" + json.data.code);
                $("#code").prop("src", json.data.code)
                // 把codeId设置到表单中。
                $("#codeId").val(json.data.codeId);
            }
        })
    }


    // 切换登录和注册表单
    function changeForm(op) {
        if (op == 1) {
            // 改变登录按钮样式
            $(".login").addClass("active");
            $(".regist").removeClass("active");
            // 显示登录表单
            $("#login").addClass("show-form");
            $("#regist").removeClass("show-form");

        } else if (op == 2) {
            $(".regist").addClass("active");
            $(".login").removeClass("active");
            $("#regist").addClass("show-form");
            $("#login").removeClass("show-form");
        }
    }

    $('#login').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            // invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                // 提示信息
                message: '用户名无效',
                // 验证规则
                validators: {
                    notEmpty: {
                        message: '用户名必须填写，不能为空'
                    },
                    stringLength: {
                        min: 4,
                        max: 16,
                        message: '用户名是4到16位的字符'
                    },
                    /*   remote: { // 注意，这里不用拼接字符串.直接把要验证的字符放后面就行。
                           url: 'http://localhost:8080/music/validation' + $("input[name=username]").val(),
                           message: '名字已经被使用',
                           delay: 500,
                           type: 'get'
                       },*/
                    // 自定义正则
                    regexp: {
                        //regexp: /^[\u4e00-\u9fa5]+$/,
                        regexp: /^[a-z|0-9|A-Z]+$/,
                        // message: '用户名必须是中文',
                        message: '用户名是英文和数字组合'
                    }
                }
            },
            password: {
                validators: {
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: '密码应该是6-16位的字符'
                    },
                    notEmpty: {
                        message: 'The password is required and can\'t be empty'
                    }
                }
            }

        }
        // 验证成功后的提交
    }).on('success.form.bv', function (e) {
        // Prevent form submission
        e.preventDefault();
        // 得到表单实例
        var $form = $(e.target);
        // 得到BootstrapValidation 验证实例
        //var bv = $form.data('bootstrapValidator');
        // 使用ajax提交表单
        $.post($form.attr('action'), $form.serialize(), function (result) {
            console.log(result);
            // 获得提交后的json内容
            if (result.status == 200) {
                location.href = "/index"
            } else {
                alert(result.message);
                // 刷新页面
                location.reload()
            }
        }, 'json');
    });


    // 这是注册的验证规则
    $('#regist').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            // invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                // 提示信息
                message: '用户名无效',
                // 验证规则
                validators: {
                    notEmpty: {
                        message: '用户名必须填写，不能为空'
                    },
                    stringLength: {
                        min: 4,
                        max: 16,
                        message: '用户名是4到16位的字符'
                    },
                    remote: { // 注意，这里不用拼接字符串.直接把要验证的字符放后面就行。
                        url: 'http://localhost:8080/music/validation' + $("input[name=username]").val(),
                        message: '名字已经被使用',
                        delay: 500,
                        type: 'get'
                    },
                    // 自定义正则
                    regexp: {
                        //regexp: /^[\u4e00-\u9fa5]+$/,
                        regexp: /^[a-z|0-9|A-Z]+$/,
                        // message: '用户名必须是中文',
                        message: '用户名是英文和数字组合'
                    }
                }
            },
            password: {
                validators: {
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: '密码应该是6-16位的字符'
                    },
                    notEmpty: {
                        message: '密码不能为空'
                    }
                }
            },
            d_password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    identical: {
                        field: 'password',
                        message: '两次密码不一致'
                    }
                }
            }
        }
        // 验证成功后的提交
    }).on('success.form.bv', function (e) {
        // Prevent form submission
        e.preventDefault();
        // 得到表单实例
        var $form = $(e.target);
        // 得到BootstrapValidation 验证实例
        //var bv = $form.data('bootstrapValidator');
        // 使用ajax提交表单
        $.post($form.attr('action'), $form.serialize(), function (result) {
            console.log(result);
            // 获得提交后的json内容
        }, 'json');
    });
</script>


</html>
